@import url(./base.less);
@rootSize: 37.5rem;
body {
  background-color: #fcfcfc;
}
// 导航栏
.nav {
  display: flex;
  position: fixed;
  left: 0;
  top: 0;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: (46 / @rootSize);
  padding: 0 (15 / @rootSize);
  background-color: #fff;
  a {
    display: block;
    width: (60 / @rootSize);
    line-height: (46 / @rootSize);
    font-size: (16 / @rootSize);
    color: #333;
  }
  .search {
    flex: 1;
    .content {
      display: flex;
      align-items: center;
      width: (250 / @rootSize);
      border-radius: (16 / @rootSize);
      background: rgba(0, 0, 0, .2);
      .search-icon {
        margin-left: (16 / @rootSize);
        img {
          width: (20 / @rootSize);
          height: (20 / @rootSize);
        }
      }
      span {
        margin-left: (5 / @rootSize);
        font-size: (12 / @rootSize);
      }
    }
  }
  .news {
    width: (50 / @rootSize);
    img {
      margin-left:(5 / @rootSize);
      width: (20 / @rootSize);
      height: (20 / @rootSize);
    }
  }
}
// banner
.banner {
  margin-top: (54 / @rootSize);
  .pic {
    width: (345 / @rootSize);
    height:(130 / @rootSize);
    margin: 0 auto;
    border-radius: (18 / @rootSize);
    img {
      width: 100%;
      height: 100%;
    }
  }
}
// 整租&合租
.tenancy {
  display: flex;
  justify-content: space-between;
  height: (70 / @rootSize);
  margin:(32 / @rootSize) (15 / @rootSize) (26 / @rootSize);
  .left {
    width: (168 / @rootSize);
    border-radius: (8 / @rootSize);
    img {
      width: 100%;
      height: 100%;
    }
  }
  .right {
    width: (168 / @rootSize);
    background-color: #087;
    border-radius: (8 / @rootSize);
    img {
      width: 100%;
      height: 100%;
    }
  }
}
// 超值特惠
.preferential {
  margin: 0 (15 / @rootSize);
  // min-height: (100 / @rootSize);
  // background-color: pink;
  .preferential-top{
    display: flex;
    justify-content: space-between;
    // background-color: #087;
    padding-bottom: (20 / @rootSize);
    h4 {
      color: #333;
      font-size: (18 / @rootSize);
    }
    a {
      img {
        width: ( 12 / @rootSize);
        height: ( 20 / @rootSize);
        // object-fit: cover;
        // vertical-align: middle;
      }
    }
  }
  .preferential-botton {
    display: flex;
    justify-content: space-between;
    padding-bottom: (30 /@rootSize);
    .left {
      .pic {
        width:(169 / @rootSize) ;
        height: (115 / @rootSize);
        border-radius: (8 / @rootSize);
        img {
          width: 100%;
          height: 100%;
        }
      }
      h4 {
        font-size: (16 / @rootSize);
        color: #333;
        padding-top:(10 / @rootSize) ;
      }
      p {
        font-size:(14 / @rootSize) ;
        padding: (3 / @rootSize) 0;
        &.price {
          color: #f39800;
        }
      }
    }
    .right {
      .pic {
        width:(169 / @rootSize) ;
        height: (115 / @rootSize);
        border-radius: (8 / @rootSize);
        background-color: #087;
        img {
          width: 100%;
          height: 100%;
        }
      }
      h4 {
        font-size: (16 / @rootSize);
        color: #333;
        padding-top:(10 / @rootSize);
      }
      p {
        font-size:(14 / @rootSize) ;
        padding: (3 / @rootSize) 0;
        &.price {
          color: #f39800;
        }
      }
    }
  }
}
// 广告
.ad {
  width: 100%;
  padding: 0 (15 / @rootSize);
  height: (56 / @rootSize);
  img {
    width: 100%;
    height: 100%;
  }
}
//推荐
.sell {
  width: 100%;
  margin-top: (36 / @rootSize);
  .sell-top {
    display: flex;
    justify-content: space-between;
    padding: 0 (15 / @rootSize);
    h4 {
      font-size:(18 / @rootSize) ;
      color: #333;
    }
    .right {
      a {
        font-size: (16 / @rootSize);
        color: #999;
        &.one {
          color: #333;
          border-bottom: 1px solid #1ca8f1;
        }
      }
    }
  }
  .sell-botton {
    padding: 0 (15 / @rootSize);
    margin-top:(24 / @rootSize) ;
    ul {
      li{
        display: flex;
        min-height: (80 / @rootSize);
        background-color: #fff;
        margin-bottom: (18 / @rootSize);
        .pic {
          width: (110 / @rootSize);
          height: (80 / @rootSize);
          margin-right: (16 / @rootSize);
          
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 4px;
          }
        }
        .right{
          // background-color: pink;
          h4{
            font-size: (16 / @rootSize);
            color: #333;
          }
          p {
            font-size: (12 / @rootSize);
            padding-top: (4 / @rootSize);
            span{
              border: 1px solid #666;
              &.one {
                margin-right:(10 / @rootSize);
              }
            }
            i {
              font-size: (14 / @rootSize);
            }
            &.slh {
              white-space: nowrap; 
              overflow: hidden; 
              text-overflow: ellipsis; 
            }
            &.ys {
              color: #f39800;
            }
          }
        }
      }
    }
  }
}
//查看
.look {
  display: block;
  min-height:(38 / @rootSize);
  width: (260 / @rootSize);
  text-align: center;
  line-height: (38 / @rootSize);
  background: rgba(0, 0, 0, .2);
  margin: 0 auto;
  color: #999;
  font-size: (16 / @rootSize);
  border-radius: (16 / @rootSize);
}
// 品牌故事
.story {
  width: 100%;
  padding: 0 (15 / @rootSize);
  a {
    display: block;
    margin-top: (24 / @rootSize);
    padding-bottom: (12 / @rootSize);
    img {
      width: 100%;
    }

  }
}
.box {
  margin-bottom: (50 / @rootSize);
}
// 底部区域
.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 999;
  width: 100%;
  height: (50 / @rootSize);
  border-top: 1px solid #999;
  background-color: #fff;
  ul {
    display: flex;
    align-items: center;
    height: (50 / @rootSize);
    li {
      flex: 1;
      text-align: center;
      .one {
        color: #333;
      }
      a {
        color: #999;
        span {
          font-size: (20 / @rootSize);
        }
        .txt {
          font-size: (12 / @rootSize);
        }
      }
    }
  }
}
